<script setup>
import { ref, onMounted, reactive } from "vue";
import $fetch from "../../../utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
let uavList = ref(null);
let form = reactive({
    name: null,
    password: null,
    confirmPassword: null,
});
let pagingGather = reactive({
    Page: 1,
    pageSize: 10,
    total: 0,
});

let informationHub = reactive({ show: false, active: null });

onMounted(() => {
    quest_list();
});

function quest_list() {
    $fetch(
        "/user/getList",
        { pagenum: pagingGather.Page, pagesize: 999 },
        "post",
        localStorage.getItem("token")
    ).then((res) => {
        uavList.value = res.data.result;
        pagingGather.total = res.data.count;
    });
}
/**
 * 分页组件
 * @param {*} n
 */
const onwards = (n) => {
    pagingGather.Page = n.Page;
    pagingGather.pageSize = n.pageSize;
    quest_list();
};
function check(target) {
    ElMessageBox({
        title: "提示",
        message: "是否确定重置该用户密码？",
        showCancelButton: true,
        confirmButtonText: "确定",
        confirmButtonClass: "danger",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
            if (action === "confirm") {
                instance.confirmButtonLoading = true;
                instance.confirmButtonText = "等待...";
                $fetch(
                    `/user/restartPassword/${target.id}`,
                    {},
                    "get",
                    localStorage.getItem("token")
                ).then((res) => {
                    if (res.code == 200) {
                        done();
                        setTimeout(() => {
                            instance.confirmButtonLoading = false;
                        }, 300);
                    }
                });
            } else {
                done();
            }
        },
    })
        .then(() => {
            ElMessage({
                type: "success",
                message: "密码重置成功！",
            });
        })
        .catch((err) => {
            console.log(123, err);
            ElMessage({
                type: "info",
                message: "取消重置！",
            });
        });
}

const handleClose = () => {
    informationHub.show = false;
};
function saveInformation() {
    if (!form.name && !form.password && !form.confirmPassword) {
        ElMessage({
            type: "info",
            message: "请完善输入信息！",
        });
        return;
    } else if (form.password !== form.confirmPassword) {
        ElMessage({
            type: "info",
            message: "确认两次密码一致！",
        });
        return;
    }
    $fetch(
        "/user/add",
        { username: form.name, password: form.password },
        "post",
        localStorage.getItem("token")
    ).then((res) => {
        if (res.code == 200) {
            quest_list()
            ElMessage({
                type: "success",
                message: "添加成功！",
            });
            informationHub.show = false; 
        }
    });
}
</script>
<template>
    <div id="uavList">
        <el-header
            >用户管理
            <el-button
                type="primary"
                size="small"
                @click="informationHub.show = true"
                >添加用户</el-button
            ></el-header
        >
        <el-table :data="uavList" border style="width: 100%">
            <el-table-column prop="id" label="id" width="54" />
            <el-table-column prop="username" label="名称" />
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click="check(scope.row)"
                        >重置密码</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- <Pagination
            class="paging"
            :pagingGather="pagingGather"
            @onwards="onwards"
        ></Pagination> -->
    </div>
    <el-dialog
        id="adduser"
        v-model="informationHub.show"
        title="添加用户"
        draggable
        :close-on-click-modal="false"
    >
        <el-form :model="form" label-width="80px">
            <el-form-item label="用户名">
                <el-col :span="16">
                    <el-input
                        v-model="form.name"
                        placeholder="请输入..."
                    />
                </el-col>
            </el-form-item>
            <el-form-item label="输入密码">
                <el-col :span="16">
                    <el-input
                        v-model="form.password"
                        type="password"
                        placeholder="请输入..."
                        show-password
                    />
                </el-col>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-col :span="16">
                    <el-input
                        v-model="form.confirmPassword"
                        type="password"
                        placeholder="请输入..."
                        show-password
                    />
                </el-col>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="saveInformation">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="less">
#uavList {
    height: 100%;
    width: 100%;
}
#adduser {
    z-index: 5;
    width: 450px;
    pointer-events: auto;
    border: 2px solid #006699;
    background-color: #00669957;
    transition: right 0.8s ease-out;
    .el-dialog__headerbtn {
        top: -2px;
    }
    .el-tree-node__content {
        color: #fff;
    }
    .el-tree-node__content:hover {
        background-color: #0066998a;
    }
    .el-dialog__header {
        width: calc(100% - 40px);
        padding: 10px 20px;
        background-color: #0066997c;

        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }
        .el-icon svg {
            color: #fff;
        }
    }
    .el-dialog__body {
        padding-top: 18px !important;
        padding-bottom: 0;
        height: calc(100% - 20px - 54px - 20px);
        overflow-y: auto;
    }
    .el-form-item__label {
        color: #fff;
    }
}
.el-overlay,
.el-overlay-dialog {
    pointer-events: auto;
}
</style>
